<template>
	<view class="content">

		<view class="add">

			<view class="s1">STEP 3/4</view>
			<view class="title">活动详情页</view>
			<view class="s2-image" v-if="row.share_image">
				<image @click="sendImage()" :src="row.share_image.startsWith('http')?row.share_image:
					conf.preview_url+row.share_image" mode="aspectFill"></image>
				<view class="del" @click="sendDel()">
					<u-icon name='close-circle-fill'></u-icon>
				</view>
			</view>

			<view class="s2" v-else @click="sendImage()">
				<text>上传活动头图</text>
				<text>推荐宽高比2：1， 文件大小不超过6M</text>
			</view>

			<view class="c1">活动分享摘要</view>
			<view class="c2">
				<u--input v-model='row.share_title' placeholder="请输入" :customStyle="{padding: '0 32rpx'}">
				</u--input>
			</view>


			<!-- <view class="c3" @click="sendInSet()">
				<view class="in-1" :class="{active: row.in_set == 1}"></view>
				<view class="text">是否显示谁参与了活动</view>
			</view> -->

			<!-- <view class="c4">
				<image src="@/static/user_icon.png"></image>
			</view> -->

			<view class="c1">活动详情</view>
			<!-- <view class="c5">(推荐宽度500px， 文件大小不超过2M)</view> -->

			<view class="list">
				<view class="item" v-for="item,index in list" :key="index">
					<view class="left">
						<u--textarea v-model="item.value" :confirmType="null" placeholder="请输入内容" v-if="item.type=='text'"
							:customStyle="{borderRadius:'16rpx',borderColor:'#D8E0F0'}"></u--textarea>
						<image :src="item.value" mode="aspectFill" v-else style="width: 100%;height: 162rpx;border-radius: 16rpx;" lazy-load></image>
						<!-- <u--image radius="16rpx" :showLoading="true"  :src="item.value" width="100%"
							height="162rpx"></u--image> -->
					</view>
					<u-icon name="close-circle-fill" color="#7677EB" size="16" @click="remove(index)"></u-icon>
				</view>
			</view>
			<view class="c6">
				<view class="t" @click="handleAdd('text')">
					+ 添加文本
				</view>
				<view class="t" @click="handleAdd()">
					+ 添加图片
				</view>
			</view>
			<u-modal :show="showModal" title="添加图片" :showCancelButton="true" @confirm="handleAdd('img')"
				@cancel="(showModal = false),(fileList1=[])">
				<view class="w-[50vw] slot-content">
					<u-upload :fileList="fileList1" :sizeType="['compressed']" @afterRead="afterRead" :maxCount="1"
						@delete="deletePic" name="1" width="50vw" height="50vw" uploadIcon='plus'
						uploadIconColor='#D8D8D8'>

					</u-upload>
				</view>
			</u-modal>
			<!-- <view class="c2 c2-1">
				<u-upload :fileList="fileList1" @afterRead="afterRead" @beforeRead="beforeRead" @delete="deletePic"
					name="1" multiple :useBeforeRead="true" :maxCount="10" :maxSize='1024 * 1024 * 2' uploadIcon='plus'
					uploadIconColor='#D8D8D8'></u-upload>
			</view> -->

		</view>

		<view class="but">
			<view style="display: flex;">
				<view class="s1" @click="onBack()">
					<image src="@/static/icon/left.png"></image>
					<text>上一步</text>
				</view>
				<view @click="save" class="save">保存</view>
			</view>

			<view class="s2" @click="onSend()">
				<text>下一步</text>
				<image src="@/static/icon/right.png"></image>
			</view>
		</view>

		<view class="but-tab">
			<image @click="sendYy()" src="@/static/icon/yy.png"></image>
			<!-- <image @click="sendTemp()" src="@/static/icon/zc.png"></image> -->
			<image @click="goInfo()" src="@/static/icon/yl.png"></image>
			<view class="cl" @click="delMusic()" v-if="row.musicfile != ''">
				<u-icon name="close" size='8' color='#fff'></u-icon>
			</view>
		</view>

		<u-toast ref="uToast"></u-toast>

		<u-overlay :show="progress_show">
			<view class="progress_show">
				<view class="progress">上传进度：{{ progress }}%</view>
			</view>
		</u-overlay>
		<u-overlay :show="show" @click="show = false">
			<view class="modal">
				<view class="box" @click.stop>
					<view class="title">
						是否需要为你创建的内容进行保存
						避免下次进入重新创建
					</view>
					<view class="btn">
						<view class="out" @click="handleSave(0)">
							直接退出
						</view>
						<view class="in" @click="handleSave(1)">
							保存
						</view>
					</view>
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import conf from '@/common/config.js';
	export default {
		props: {
			tempId: {
				type: [String, Number]
			},
			tempImg: {
				type: String
			},
			addForm: {
				type: Object,
				default: () => {
					return {}
				}
			},
			typeForm: {
				type: String
			},
			editId: {
				type: [String, Number]
			}
		},
		data() {
			return {
				conf,
				showModal: false,
				temp_id: 0,
				id: 0,
				share_image: '',
				fileList1: [],
				progress: 10,
				progress_show: false,
				list: [],
				row: {
					share_image: '',
					share_title: '',
					content_images: '',
					musicfile: '',
					in_set: 0,
					content_node: '',
					templateid: ''
				},
				show: false
			};
		},
		mounted() {
			console.log(this.tempId, this.typeForm, this.addForm);
			this.row.templateid = this.tempId;

			// // this.id = options.id
			if (this.tempImg) {
				this.$nextTick(() => {
					this.row.share_image = this.tempImg
				})
			}
			if (this.addForm.id || this.typeForm == 'prev') {
				this.$nextTick(() => {
					this.reviewForm()
				})
			}
			// this.row.templateid && this.getDetail()
		},
		methods: {
			save() {
				this.show = true
			},
			handleSave(type) {
				if (type) {
					// this.row = {
					// 	...this.addForm,
					// 	...this.row
					// }
					const params = this.row || {}
					this.$API.saveDraft({
						title: params.title,
						start_time: params.start_time,
						end_time: params.end_time,
						phone: params.phone,
						address: params.address,
						images: params.images,
						share_title: params.share_title,
						musicfile: params.musicfile,
						in_set: params.in_set,
						money: params.money,
						templateid: params.templateid,
						content_node: JSON.stringify(this.list),
						template_custom_image: params.template_custom_image
					}, +this.editId).then(res => {
						this.show = false
						uni.showModal({
							title: '提示',
							content: '恭喜您保存成功！',
							showCancel: false,
							success: () => {
								// this.$store.commit('$uStore', {
								// 	name: 'vuex_tempForm',
								// 	value: {}
								// })
								uni.redirectTo({
									url: '/pages/activity/index'
								})
							}
						})

					})
				} else {
					uni.navigateBack()
				}
			},
			handleAdd(type) {
				if (!type) return this.showModal = true
				if (type == 'img' && !this.fileList1.length) return this.$u.toast('请上传图片')
				this.list.push({
					type,
					value: type == 'img' ? this.fileList1[0].orgUrl : ''
				})
				if (type == 'img') {
					this.showModal = false
					this.fileList1 = []
				}
			},
			remove(index) {
				this.list.splice(index, 1)
			},
			reviewForm() {
				if (Object.keys(this.addForm).length) {
					console.log(this.addForm);
					this.row.share_image = this.addForm.share_image || this.tempImg
					this.row.share_title = this.addForm.share_title || ''
					this.row.content_images = this.addForm.content_images || ''
					this.row.musicfile = this.addForm.musicfile || ''
					this.row.content_node = JSON.parse(this.addForm.content_node) || ''
					// this.row.in_set = this.addForm.in_set ?? 1
					this.row.in_set = 0
					this.list = this.row.content_node || []
					this.row.templateid = this.tempId;
					this.row = {
						...this.addForm,
						...this.row
					}
					// console.log(this.row);
					// this.fileList1 = this.addForm.content_images_text || this.addForm.content_images_url || [];
					if (this.typeForm == 'next' && !this.row.templateid && !this.editId) {
						this.fileList1 = []
					}
				}
			},

			getInfo() {
				this.$API.getActivity({
					id: this.id
				}).then(res => {
					this.row = res.data;
					this.row.musicfile = res.data.musicfile
					if (res.data.share_image != '') {
						this.share_image = res.data.share_image_url;
					}
					if (this.share_image == '' && res.data.images_url != '') {
						this.share_image = res.data.images_url[0];
						res.data.share_image = res.data.images_url[0];
					}
					if (res.content_images != '') {
						this.fileList1 = res.data.content_images_url;
					}
					if (this.row.templateid > 0) {
						this.getDetail();
					}

				})
			},
			getDetail() {
				this.$API.templateDetailNew({
					id: this.row.templateid
				}).then(res => {
					this.row = res.data;
					this.row.templateid = this.tempId
					this.share_image = res.data.share_image_url;
					// this.fileList1 = res.data.content_images_text;
					if (this.typeForm == 'prev') {
						this.reviewForm()
					}
				})
			},
			onBack() {
				this.$emit('onBack')

				// uni.redirectTo({
				// 	url: '/pages/activity/add_2?id=' + this.id
				// })
			},
			sendDel() {
				this.share_image = '';
				this.row.share_image = '';
			},
			sendImage() {
				let that = this;
				let host_url = conf.url_config + '/api/common/upload';
				uni.chooseImage({
					count: 1, //默认100
					success: (chooseImageRes) => {
						const file = chooseImageRes.tempFiles[0];
						const MAX_SIZE = 1024 * 1024 * 6;
						if (file.size > MAX_SIZE) {
							this.$refs.uToast.show({
								type: 'error',
								message: "活动头图不能超过6M",
							});
							return false;
						}
						const tempFilePaths = chooseImageRes.tempFilePaths;
						uni.uploadFile({
							url: host_url, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								Token: this.vuex_token
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data);
								console.log('data', data)
								that.share_image = data.data.fullurl;
								that.row.share_image = data.data.url;
							}
						});
					}
				});
			},
			sendInSet() {
				this.row.in_set = this.row.in_set == 1 ? 0 : 1
			},
			sendYy() {
				let that = this;
				let host_url = conf.url_config + '/api/common/upload';

				uni.chooseFile({
					count: 1, //默认100
					extension: ['.mp3', '.wav'],
					success: function(res) {
						const file = res.tempFiles[0];
						const MAX_SIZE = 1024 * 1024 * 5;
						if (file.size > MAX_SIZE) {
							that.$refs.uToast.show({
								type: 'error',
								message: "背景音乐不能超过5MB",
							});
							return false;
						}
						const tempFilePaths = res.tempFilePaths;
						this.progress_show = true;
						uni.showLoading({
							mask: true,
						})
						const uploadTask = uni.uploadFile({
							url: host_url, //仅为示例，非真实的接口地址
							filePath: tempFilePaths[0],
							name: 'file',
							header: {
								Token: that.vuex_token
							},
							success: (uploadFileRes) => {
								let data = JSON.parse(uploadFileRes.data);
								console.log('data', data)
								that.row.musicfile = data.data.url;
								uni.hideLoading()
							}
						});
						uploadTask.onProgressUpdate((res) => {
							that.onProgress(res);
						});
					}
				});
			},
			delMusic() {
				this.row.musicfile = '';
			},
			onProgress(progressEvent, file) {
				this.progress_show = true;
				this.progress = progressEvent.progress;
				if (progressEvent.progress == 100) {
					this.progress = 0;
					this.progress_show = false;
					this.$refs.uToast.show({
						message: "背景音乐上传成功",
					});
				}
			},
			beforeRead(event) {
				console.log(event)
				const MAX_SIZE = 1024 * 1024 * 2; // 5MB
				event.file.forEach(e => {
					if (e.size > MAX_SIZE) {
						this.$refs.uToast.show({
							type: 'error',
							message: "图片内容图不能超过2MB",
						});
						return false;
					}
				})
				return true;
			},
			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				// console.log('lists', lists, this.fileList1)
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFilePromise(lists[i].url)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result.url,
						orgUrl: result.fullurl

					}))
					fileListLen++
				}
			},
			uploadFilePromise(url) {
				let host_url = conf.url_config + '/api/common/upload';

				return new Promise((resolve, reject) => {
					let a = uni.uploadFile({
						url: host_url,
						filePath: url,
						name: 'file',
						formData: {
							user: 'test'
						},
						header: {
							Token: this.vuex_token
						},
						success: (res) => {
							let data = JSON.parse(res.data);
							setTimeout(() => {
								resolve(data.data)
							}, 1000)
						}
					});
				})
			},
			sendTemp() {
				if (!this.row.share_image) return this.$u.toast('请上传banner头图')
				if (!this.row.share_title) return this.$u.toast('请输入活动分享摘要')
				// if (!this.row.musicfile) return this.$u.toast('请上传背景音乐')
				if (!this.list.length) return this.$u.toast('请设置活动详情')
				uni.showModal({
					title: '创建新的模板',
					// content: '是否以当前内容新增模板',
					editable: true,
					placeholderText: '请输入模板名称',
					success: (e) => {
						console.log(e);
						if (e.confirm) {
							if (!e.content) return this.$u.toast('请输入模板名称')
							let that = this
							let params = this.row
							params.template_name = e.content
							params.content_node = JSON.stringify(this.list)
							// let image = [];
							// console.log(this.fileList1);
							// this.fileList1.forEach(v => {
							// 	image.push(v.url);
							// });
							// params.content_images = image.join(',')

							this.$API.createTemp(params).then(res => {
								uni.showModal({
									title: '提示',
									content: '模板保存成功',
									showCancel: false,
									// success: function() {
									// 	if (that.temp_id == 0) {
									// 		uni.redirectTo({
									// 			url: '/pages/activity/add_3?temp_id=' +
									// 				res.data.id +
									// 				'&id=' + that.id
									// 		})
									// 	}
									// }
								})
							});
						}
					}
				})

			},
			onSend() {
				if (!this.row.share_image) return this.$u.toast('请上传banner头图')
				if (!this.row.share_title) return this.$u.toast('请输入活动分享摘要')
				// if (!this.row.musicfile) return this.$u.toast('请上传背景音乐')
				if (!this.list.length) return this.$u.toast('请设置活动详情')
				let that = this
				let params = this.row
				params.id = this.id

				let image = [];
				this.fileList1.forEach(v => {
					image.push(v.url);
				});
				params.content_images = image.join(',')
				// params.content_images_text = this.fileList1.map(e => {
				// 	return {
				// 		url: e.url.startsWith('http') ? e.url : conf.preview_url + e.url
				// 	}
				// })
				if (this.list.length != this.list.filter(e => e.value).length) return this.$u.toast('有活动详情文本未填写，请输入')
				params.content_node = JSON.stringify(this.list)
				// console.log(params);
				this.$emit('updateaddThree', params)

			},
			goInfo() {
				if (!this.row.share_image) return this.$u.toast('请上传banner头图')
				if (!this.row.share_title) return this.$u.toast('请输入活动分享摘要')
				// if (!this.row.musicfile) return this.$u.toast('请上传背景音乐')
				// if (!this.fileList1.length) return this.$u.toast('请上传设置图片内容')
				if (!this.list.length) return this.$u.toast('请设置活动详情')
				if (this.list.length != this.list.filter(e => e.value).length) return this.$u.toast('有活动详情文本未填写，请输入')
				let that = this
				let params = this.row
				// params.id = this.id

				let image = [];
				console.log(this.fileList1);
				this.fileList1.forEach(v => {
					image.push(v.url);
				});
				console.log(this.fileList1);
				params.content_images = image.join(',')
				params.content_node = JSON.stringify(this.list)
				console.log(params);
				params.start_time_text = new Date(this.addForm.start_time).getTime()
				params.address = this.addForm.address
				params.content_images_text = this.fileList1.map(e => {
					return {
						url: e.url.startsWith('http') ? e.url : conf.preview_url + e.url
					}
				})
				uni.setStorageSync('preview', params)

				uni.navigateTo({
					url: '/pages/activity/detail'
				})

			}
		}
	}
</script>

<style lang="scss">
	.content {
		width: 670rpx;
		margin: 0 auto;
	}

	.add {
		width: 566rpx;
		padding: 52rpx;
		background-color: #fff;
		border-radius: 48rpx;
		margin-top: 52rpx;

		.s1 {
			width: 100%;
			height: 34rpx;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 600;
			color: #7677EB;
			line-height: 34rpx;
			text-align: center;
		}

		.title {
			width: 100%;
			height: 52rpx;
			font-size: 36rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 600;
			color: #110202;
			line-height: 52rpx;
			text-align: center;
			margin-top: 16rpx;
		}

		.s2 {
			width: 566rpx;
			height: 322rpx;
			background-color: #E6EDF5;
			font-size: 30rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 400;
			display: flex;
			flex-direction: column;
			align-items: center;
			justify-content: center;
			color: #BFCEDF;
			line-height: 68rpx;
			text-align: center;
			border-radius: 16rpx;
			margin-top: 56rpx;

			text {
				&:nth-child(2) {
					font-size: 24rpx;
					color: #9DA4B0;
					line-height: 36rpx;
				}
			}
		}

		.s2-image {
			width: 566rpx;
			height: 322rpx;
			margin: 0 auto;
			margin-top: 56rpx;
			position: relative;

			image {
				width: 566rpx;
				height: 322rpx;
				border-radius: 16rpx;
			}

			.del {
				position: absolute;
				top: 0;
				right: 0;
			}
		}

		.c1 {
			height: 28rpx;
			font-size: 28rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 400;
			color: #7D8592;
			line-height: 28rpx;
			margin-top: 56rpx;
		}

		.c2 {
			width: 566rpx;
			margin-top: 40rpx;

			/deep/ .u-input {
				height: 98rpx;
				border-radius: 28rpx;
			}

			/deep/ .u-upload {
				.u-upload__button {
					background-color: #fff;
					border: 2rpx solid #D8E0F0;
					border-radius: 16rpx;

					.u-icon__icon {
						span {
							font-size: 36rpx;
						}
					}
				}

				.u-upload__deletable {
					width: 24rpx;
					height: 24rpx;
					line-height: 24rpx;
					text-align: center;
					border-radius: 100%;
					background-color: #000000;

					&__icon {
						position: relative;
						inset: 0;
					}
				}
			}
		}

		.c3 {
			margin-top: 56rpx;
			@include flex;
			align-items: center;

			.in-1 {
				width: 40rpx;
				height: 40rpx;
				background: #D8E0F0;
				border-radius: 50%;
				position: relative;

				&::before {
					content: "";
					position: absolute;
					width: 32rpx;
					height: 32rpx;
					background: #fff;
					border-radius: 50%;
					left: 4rpx;
					top: 4rpx;
				}

				&.active {
					&::after {
						content: "";
						position: absolute;
						width: 20rpx;
						height: 20rpx;
						background: #7677EB;
						border-radius: 50%;
						left: 10rpx;
						top: 10rpx;
					}
				}
			}

			.text {
				height: 42rpx;
				font-size: 28rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				color: #110202;
				line-height: 42rpx;
				margin-left: 20rpx;
			}
		}

		.c4 {
			@include flex;
			justify-content: center;
			margin-top: 56rpx;

			image {
				width: 372rpx;
				height: 72rpx;
			}
		}

		.c5 {
			height: 36rpx;
			font-size: 24rpx;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 400;
			color: #9DA4B0;
			line-height: 36rpx;
			margin-top: 8rpx;
		}

		.c2-1 {
			margin-top: 16rpx;
		}
	}

	.but {
		@include flex;
		justify-content: space-between;
		margin-top: 60rpx;
		margin-bottom: 60rpx;

		.save {
			width: 176rpx;
			height: 92rpx;
			box-shadow: 0rpx 12rpx 116rpx 0rpx rgba(196, 203, 214, 0.1036);
			border-radius: 20rpx 20rpx 20rpx 20rpx;
			border: 2rpx solid #7677EB;
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 400;
			font-size: 30rpx;
			color: #7677EB;
			text-align: center;
			line-height: 92rpx;
		}

		.s1 {
			width: 176rpx;
			height: 96rpx;
			@include flex;
			justify-content: center;
			align-items: center;
			padding-right: 10rpx;

			text {
				font-size: 30rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				color: #7677EB;
				line-height: 96rpx;
			}

			image {
				width: 48rpx;
				height: 48rpx;
				margin-right: 28rpx;
			}
		}

		.s2 {
			width: 290rpx;
			height: 96rpx;
			background: #7677EB;
			box-shadow: 0 12rpx 24rpx 0 rgba(63, 140, 255, 0.2637);
			border-radius: 28rpx;
			@include flex;
			justify-content: center;
			align-items: center;

			text {
				font-size: 30rpx;
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				color: #FFFFFF;
				line-height: 96rpx;
			}

			image {
				width: 48rpx;
				height: 48rpx;
				margin-left: 28rpx;
			}
		}
	}

	.but-tab {
		position: fixed;
		right: 12rpx;
		bottom: 142rpx;
		width: 84rpx;
		@include flex(column);

		image {
			width: 84rpx;
			height: 84rpx;
			margin-top: 20rpx;
		}

		.cl {
			position: absolute;
			font-size: 24rpx;
			left: 50rpx;
			top: 20rpx;
			background-color: #9DA4B0;
			border-radius: 50rpx;
			padding: 5rpx;
		}
	}

	.progress_show {
		display: flex;
		align-items: center;
		justify-content: center;
		height: 100%;

		.progress {
			width: 400rpx;
			height: 80rpx;
			background-color: #fff;
			text-align: center;
			line-height: 80rpx;
		}
	}

	.c6 {
		margin-top: 48rpx;
		display: flex;
		justify-content: space-between;

		.t {
			font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
			font-weight: 400;
			font-size: 28rpx;
			color: #7677EB;
		}
	}

	.list {
		margin-top: 40rpx;

		.item {
			display: flex;
			justify-content: space-between;
			margin-bottom: 22rpx;

			.left {
				flex: 1;
				background: #FFFFFF;
				box-shadow: 0rpx 2rpx 4rpx 0rpx rgba(184, 200, 224, 0.2221);
				border-radius: 16rpx 16rpx 16rpx 16rpx;
				margin-right: 28rpx;
			}
		}
	}

	/deep/.uni-textarea-textarea {
		color: #7D8592;
		font-size: 28rpx;
	}

	/deep/.uni-textarea-placeholder {
		font-size: 28rpx
	}

	.modal {

		display: flex;
		height: 100%;
		align-items: center;
		justify-content: center;
		padding: 0 40rpx;

		.box {
			width: 622rpx;
			height: 432rpx;
			background: #FFFFFF;
			border-radius: 24rpx 24rpx 24rpx 24rpx;
			padding: 0 40rpx;
			display: flex;
			flex-direction: column;
			justify-content: space-between;

			.title {
				font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
				font-weight: 400;
				font-size: 32rpx;
				color: #000000;
				text-align: center;
				margin-top: 70rpx;
				padding: 0 30rpx;
			}

			.btn {
				margin-bottom: 70rpx;
				display: flex;
				justify-content: space-between;

				.out {
					width: 240rpx;
					height: 96rpx;
					box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(63, 140, 255, 0.2637);
					border-radius: 28rpx 28rpx 28rpx 28rpx;
					border: 2rpx solid #7677EB;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 400;
					font-size: 30rpx;
					color: #7677EB;
					text-align: center;
					line-height: 96rpx;
					box-sizing: border-box;
				}

				.in {
					width: 240rpx;
					height: 96rpx;
					background: #7677EB;
					box-shadow: 0rpx 12rpx 24rpx 0rpx rgba(63, 140, 255, 0.2637);
					border-radius: 28rpx;
					font-family: Alibaba PuHuiTi 2.0, Alibaba PuHuiTi 20;
					font-weight: 400;
					font-size: 30rpx;
					color: #FFFFFF;
					text-align: center;
					line-height: 96rpx;
				}
			}
		}

	}
</style>